<template>
  <!-- 自定义日历控件 -->
  <div class="calendar">
    <el-card :body-style="{ padding: '20px', minHeight: 'calc(100vh - 100px)' }">
      <el-calendar v-model="tradeDate">
        <template slot="dateCell" slot-scope="{ date, data }">
          <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
            <div class="calendar-day">
              {{
              data.day
              .split('-')
              .slice(2)
              .join('-')
              }}
            </div>
            <div v-for="(item, index) in formatSchedule(data)" :key="index" class="tradeDate">
              <div class="trade_money">
                <b class="text-danger">￥{{item.trade_money}}</b>
              </div>
              <div
                class="trade_rate_money"
                v-show="rateMoney > 0 && item.trade_rate_money == 0 ? false:true"
              >
                <img src="./images/calendarIco4.png" />
                <b class="text-primary">￥{{item.trade_rate_money}}</b>
              </div>
              <div class="num">{{item.trade_num}}</div>
            </div>
          </div>
        </template>
      </el-calendar>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tradeDate: new Date(), //日期控件显示的月份
      rateMoney: 0, //手续费-前端统计
      tradeData: {
        schedule: [
          {
            settlement_money: "53.50",
            trade_date: "2021-08-01",
            trade_money: "53.50",
            trade_num: 3,
            trade_rate_money: "0.00"
          },
          {
            settlement_money: "78.00",
            trade_date: "2021-08-02",
            trade_money: "78.00",
            trade_num: 5,
            trade_rate_money: "0.00"
          }
        ]
      } //每月数据交易数据
    };
  },
  watch: {
    currentDate(nVal) {
      this.tradeData.schedule = [];
    }
  },
  computed: {
    //将返回数据里的时间与日历控件里的时间匹配，将数据回显在对应的位置上
    //数据的时间格式： trade_date:"2021-06-05" --- yyyy-MM-dd；
    //如果后端返回的时间不是yyyy-MM-dd，要转格式再匹配
    formatSchedule() {
      return data => {
        return this.tradeData.schedule.filter(ele => {
          let time = ele.trade_date;
          return time == data.day;
        });
      };
    }
  },
  created() {
    this.tradeDate = "2021-08";
  }
};
</script>
<style lang="scss" scoped>
.calendar ::v-deep .el-calendar__header {
  padding: 12px 20px 70px 0;
}
.calendar ::v-deep .el-calendar-table .el-calendar-day {
  height: 90px;
}
.tradeDate {
  font-size: 14px;
  position: relative;
  margin-left: 20px;
  height: 60px;
  text-align: center;
  .trade_money {
    margin-top: 5px;
    b {
      font-size: 18px;
    }
  }
  .trade_rate_money {
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      margin-right: 13px;
      width: 13px;
    }
  }
  > div {
    margin-bottom: 5px;
    span {
      width: 70px;
      text-align: right;
      display: inline-block;
    }
    b {
      margin-left: -10px;
    }
  }
  .num {
    position: absolute;
    bottom: 1px;
    right: 0;
    background: #409eff;
    border-radius: 5px 0px 0px 0px;
    display: inline-block;
    padding: 0px 6px;
    color: #fff;
    font-size: 12px;
    height: 19px;
    line-height: 19px;
    margin-bottom: -1px;
    margin-right: -8px;
  }
}
</style>
